<template>
    <v-navigation-drawer class="app--drawer" v-model="isDrawer" app>
        <v-toolbar color="purple darken-1">
            <!-- <img :src="computeLogo" height="36" alt="新印相" /> -->
            <img src="../../assets/minilogo.png" height="36" alt="新印相" />
            <v-toolbar-title class="ml-0 pl-3">
                <span class="hidden-sm-and-down font-weight-black "
                    >新印相开放平台</span
                >
            </v-toolbar-title>
        </v-toolbar>

        <v-list dense v-for="route in routes" :key="route.path">
            <div v-if="route.children !== undefined">
                <v-list-item
                    @click="linkTo(route.path)"
                    v-if="
                        route.name !== 'authorization' &&
                            route.children.length === 1
                    "
                >
                    <v-list-item-action>
                        <v-icon>{{ route.meta.icon }}</v-icon>
                    </v-list-item-action>
                    <v-list-item-content>
                        <v-list-item-title>{{
                            route.meta.title
                        }}</v-list-item-title>
                    </v-list-item-content>
                </v-list-item>
            </div>

            <!-- 非嵌套路由 -->
            <div v-if="route.children === undefined">
                <v-list-item
                    @click="linkTo(route.path)"
                    v-if="route.name !== 'login'"
                >
                    <v-list-item-action>
                        <v-icon>{{ route.meta.icon }}</v-icon>
                    </v-list-item-action>
                    <v-list-item-content>
                        <v-list-item-title>{{
                            route.meta.title
                        }}</v-list-item-title>
                    </v-list-item-content>
                </v-list-item>
            </div>

            <!-- 两层嵌套路由 -->
            <v-list-group
                :prepend-icon="route.meta.icon"
                v-if="route.children !== undefined && route.children.length > 1"
            >
                <template v-slot:activator>
                    <v-list-item-title>{{
                        route.meta.title
                    }}</v-list-item-title>
                </template>
                <v-list-item
                    @click="linkTo(item.path)"
                    v-for="item in route.children"
                    :key="item.path"
                >
                    <v-list-item-action>
                        <!-- 占位用的 -->
                    </v-list-item-action>
                    <v-list-item-action>
                        <i class="icon-box">
                            <svg class="icon" aria-hidden="true">
                                <use :xlink:href="item.meta.icon"></use>
                            </svg>
                        </i>
                        <!-- <v-icon>{{ item.meta.icon }}</v-icon> -->
                    </v-list-item-action>
                    <v-list-item-action>
                        <!-- 占位用的 -->
                    </v-list-item-action>
                    <v-list-item-content>
                        <v-list-item-title>{{
                            item.meta.title
                        }}</v-list-item-title>
                    </v-list-item-content>
                </v-list-item>
            </v-list-group>
        </v-list>
    </v-navigation-drawer>
</template>
<script lang="ts">
import { Vue, Component, Prop, Emit, Watch } from 'vue-property-decorator';
import '@/assets/iconfont/iconfont';

@Component
export default class PageDtawer extends Vue {
    public routePath: string = '';
    private isDrawer: boolean = true;

    @Prop({ default: true, type: Boolean })
    private drawer!: boolean;

    @Emit('routePath') public send(path: string) {
        return;
    }

    @Watch('drawer')
    private changeIsdrawer() {
        this.isDrawer = this.drawer; // 不可直接操作父组件传过来的值，用新变量处理，否则会报错
    }

    get routes() {
        // 计算属性
        return (this.$router as any).options.routes;
    }
    get computeLogo() {
        return '../../assets/minilogo.png';
    }
    private mounted() {
        // this.$vuetify.theme.dark = true;
    }

    private linkTo(item: string) {
        this.routePath = item;
        this.send(this.routePath);
    }
}
</script>
<style scoped>
.icon-box {
    font-size: 16px;
    line-height: 40px;
    margin: 0;
    display: inline-block;
    font-style: normal;
    vertical-align: -0.125em;
    text-align: center;
    text-transform: none;
}
.icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}
.hidden-sm-and-down {
    color: aliceblue;
    font-size: 1.2em;
}
</style>